<script setup>
import { ref } from 'vue';
import { uniFetch } from '../../api/uni-fetch';
import { onReachBottom, onPullDownRefresh, onShow } from '@dcloudio/uni-app';
import {onShareAppMessage} from '@dcloudio/uni-app'
onShareAppMessage(()=>{
	return {
		titlt:'智能售卖机-补货',
		path:'/skgPagesA/replenishmentList/replenishmentList'
	}
})

onShow(() => {
  // 重置并刷新数据
  totol.value = 0;
  query.value.page = 1;
  replenish.value = [];
  getList();
});

const replenish = ref([]);
const query = ref({ page: 1, pageSize: 10, goodsStatus: undefined });
const totol = ref(0);
const contentText = ref({
	contentdown: '上拉加载更多',
	contentrefresh: '加载中...',
	contentnomore: '没有更多的数据了'
});
const status = ref('loading');
async function getTab(val) {
	if (val === query.value.goodsStatus) {
		return;
	}
	replenish.value = [];
	query.value.page = 1;
	query.value.goodsStatus = val;
	getList();
}
getList();
async function getList(stop) {
	if (totol.value && replenish.value.length >= totol.value) {
		status.value = 'noMore';
		uni.showToast({
			icon: 'none',
			titlt: '暂无更多'
		});
		return;
	} else {
		status.value = 'loading';
	}
	const res = await uniFetch.post('/supplier/list', query.value);
	if (res.code === 10000) {
		totol.value = res.data.totol;
		replenish.value.push(...res.data.list);
		if (res.data.list) {
			status.value = 'noMore';
		}
	}
	if (stop) {
		uni.stopPullDownRefresh();
	}
}
onReachBottom(() => {
	query.value.page++;
	getList();
});
onPullDownRefresh(() => {
	totol.value = 0;
	query.value.page = 1;
	replenish.value = [];
	getList(true);
});
function getReplent(id){
	uni.navigateTo({
		url:'/subpkg/replenishment/replenishment?id='+id
	})
}
</script>

<template>
	<view class="historyList">
		<view class="replent-tab-bg">
			<view class="replent-tab">
				<view class="tab" :class="query.goodsStatus == undefined ? 'activeTab' : ''" @click="getTab(undefined)">
					<image src="../../static/images/qb.png" mode="scaleToFill"></image>
					<text>全部</text>
				</view>
				<view class="tab" :class="query.goodsStatus == 0 ? 'activeTab' : ''" @click="getTab(0)">
					<image src="../../static/images/wwc.png" mode="scaleToFill"></image>
					<text>未完成</text>
				</view>
				<view class="tab" :class="query.goodsStatus == 1 ? 'activeTab' : ''" @click="getTab(1)">
					<image src="../../static/images/ywc.png" mode="scaleToFill"></image>
					<text>已完成</text>
				</view>
			</view>
		</view>
		<view class="replent-list">
			<view class="replenish-order" v-for="(item, index) in replenish" :key="index" @click="getReplent(item.id)">
				<view style="display: flex; margin-bottom: 15rpx;">
					<view style="display: flex; align-items: flex-start; font-size: 26rpx;">
						<span class="vertical"></span>
						<text class="fs28 fbold mr10 w250" style="
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								line-height: 28rpx; 
							">{{ item.device.name || item.device.box_id }}</text>
					</view>
					<view style="display: flex; align-items: flex-start; flex-direction: column; font-size: 24rpx; flex: 1; justify-content: flex-end; line-height: 1;">
						<view class="replenish-user-zt">{{ item.order_no }}</view>
						<view class="replenish-user-zt" style="margin-top: 5px;">{{ item.goods_status != 0 ? '已完成' : '未完成' }}</view>
					</view>
				</view>
				<view  v-if="item.goods.length > 0" style="display: flex; margin-bottom: 10px;justify-content: space-between; margin-bottom: 8px;">
					<view class="flexRow jStart">
						<view class="goods-image">
							<image lazy-load :src="item.goods[0].banner" mode="aspectFit"></image>
						</view>
						<view class="goods-title sf ml14">
							{{ item.goods[0].name }}
						</view>
					</view>
					<view class="right-area">
						<view class="money">x {{ item.goods[0].num }}</view>
						<text v-if="item.goods.length > 1" class="money">...等商品</text>
					</view>
				</view>
				<view v-else class="fs28" style="color: #c5c5c5; text-align: center; margin-bottom: 30px; margin-top: 20px;">未补货商品</view>
				<view class="replenish-timer">
					补货时间：
					<uni-dateformat :date="item.create_time * 1000"></uni-dateformat>
				</view>
				<!-- <view class="status-bg" :class="item.goods_status != 0 ? 'status-blue' : ''">
					<text>{{ item.goods_status != 0 ? '已完成' : '未完成' }}</text>
				</view> -->
			</view>
		</view>
		<view v-if="!replenish.length" style="background-color: #fff; width: 100vw; height: 100vh">
			<Empty text="暂无订单"></Empty>
		</view>
		<uni-load-more :status="status" :icon-size="14" :content-text="contentText" :showIcon="true" :iconType="snow"></uni-load-more>
	</view>
</template>

<style lang="scss">
page {
	background: f5f5f5;
}
.goods-image {
	float: left;

	image {
		width: 140rpx;
		height: 140rpx;
	}
}
.goods-title {
	width: 69%;
	/* 确保有足够的宽度 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	/* 限制显示3行 */
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 28rpx;
	/* 设置合理的字体大小 */
}
.right-area {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	.money {
		color: #8c858c;
		font-size: 30rpx;
	}
}
.vertical {
	line-height: 28rpx; 
	background-color: #2879d0;
	width: 8rpx;
	height: 28rpx;
	display: block;
	border-radius: 16rpx;
	margin-right: 12rpx;
}
.replent-tab-bg {
	width: 100%;
	position: fixed;
	top: 0;
	background: #f5f5f5;
	z-index: 5;
}
.replent-tab {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 120rpx;
	width: 100%;
	box-shadow: -5px 5px 5px 0px #c0c0c0;
	background: #fff;
	margin-top: 20rpx;
	padding-top: 20rpx;
	.tab {
		height: 120rpx;
		padding-bottom: 10rpx;
		box-sizing: border-box;
		border-bottom: 1px solid transparent;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		image {
			width: 60rpx;
			height: 60rpx;
		}
	}
	.activeTab {
		border-bottom: 3px solid #3475ab;
	}
}

.replent-list {
	margin-top: 30rpx;
	padding-top: 150rpx;
	.replenish-order {
		width: 680rpx;
		// height: 200rpx;
		box-shadow: 0px 0px 5px 0px #c0c0c0;
		position: relative;
		margin: 0 auto;
		padding: 30rpx 35rpx 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		margin-bottom: 20rpx;
		border-radius: 3px;
		.replenish-user,
		.box_id,
		.replenish-timer {
			font-size: 28rpx;
			color: #727272;
			margin-bottom: 20rpx;
		}
		.replenish-user-zt {
			font-size: 26rpx;
			color: #727272;
			width: 100%;
			text-align: right;
		}
		.status-bg {
			width: 200rpx;
			height: 50rpx;
			line-height: 50rpx;
			position: absolute;
			top: 10px;
			right: -28px;
			transform: rotate(45deg);
			text-align: center;
			z-index: 1;
			color: #fff;
			background-image: linear-gradient(to right, #e44d26 0%, #f16529 51%, #e44d26 100%);
		}
		.status-blue {
			background-image: linear-gradient(135deg, #3c8ce7 10%, #00eaff 100%);
		}
	}
}
</style>
